<template>
  <div class="relative" style="display: flex; align-items: center; justify-content: center">
    <div class="text-container">
      <div ref="text" class="status_text">{{ statusText }}</div>
      <div ref="timer" class="timer">{{ timer }}</div>
      <div ref="count">{{ countText }}</div>
    </div>
    <div class="" ref="pixi_app"></div>
  </div>
</template>

<script>
import { PixiPlugin } from "gsap/PixiPlugin";
import { gsap, Linear } from "gsap";

// const PIXI = require('pixi.js');
const { PIXI } = window;

export default {
  name: "Time25",
  props: {
    size: {
      type: Number,
      default: 300,
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      version: "0.0.1",
      app: null,
      twwen: null,
      ticker: null,
      // 这个是背景和圆角矩形的大容器gsap控制器
      container: null,
      // 这个是25的图片精灵图
      sprite25: null,
      // 装背景和圆角矩形的大容器
      sprite: null,
      // 圆角矩形数组
      objs: [],
      // 呼吸球
      huxiCir: null,
      // 呼吸动画
      huxiTween: null,
      chars: null,
      // 文字
      statusText: "",
      // 计时
      timer: "",
      // 计次
      count: 0,

      png25:
        "",
      HuxiMp3: new Audio("https://project-star.oss-cn-beijing.aliyuncs.com/npm/static/mp3/inhale_exhale.mp3"),
    };
  },
  computed: {
    countText() {
      return this.count === 0 ? "" : `${this.count}次`;
    },
  },
  mounted() {
    gsap.registerPlugin(PixiPlugin);
    const { size } = this;

    const app = new PIXI.Application({
      width: size,
      height: size,
      backgroundAlpha: 0,
      antialias: true,
    });
    this.app = app;
    this.$refs.pixi_app.appendChild(this.app.view);
    this.create25();
    this.HuxiMp3.addEventListener("timeupdate", () => {
      this.huxiTween.seek(this.HuxiMp3.currentTime);
    });
    this.HuxiMp3.addEventListener("ended", () => {
      this.HuxiMp3.play();
    });
  },
  activated() {},
  methods: {
    goTarget(url) {
      window.open(url, "__blank");
    },
    toggle() {
      console.log(this.twwen.paused());
      this.twwen.paused() ? this.twwen.play() : this.twwen.pause();
      this.container.paused() ? this.container.play() : this.container.pause();
      console.log(this.container);
    },
    play() {
      if (this.twwen.paused()) {
        this.twwen.play();
      }
      if (this.container.paused()) {
        this.container.play();
      }
    },
    pause() {
      if (!this.twwen.paused()) {
        this.twwen.pause();
      }
      if (!this.container.paused()) {
        this.container.pause();
      }
    },
    restart() {
      this.twwen.pause(0);
      this.container.pause(0);
    },
    create25() {
      const { app } = this;
      // 创建四周的圆角矩形精灵
      const sprite = new PIXI.Sprite();
      this.sprite = sprite;
      // 创建25图片的纹理
      const texture = PIXI.Texture.from(this.png25);
      // 创建25图片的精灵
      const sprite25 = new PIXI.Sprite(texture);
      this.sprite25 = sprite25;
      // 获取图片的宽度和高度
      const png25Width = sprite25.width < 2 ? 162 : sprite25.width;
      const png25Height = sprite25.height < 2 ? 183 : sprite25.height;
      // 设置25图片的支点为中心
      sprite25.pivot.x = png25Width / 2;
      sprite25.pivot.y = png25Height / 2;
      // 移动25图片到中心
      sprite25.position.set(app.view.width / 2, app.view.height / 2);
      // 根据舞台的宽度设置一下图片的缩放比例
      if (png25Width / app.view.width > 1) {
        sprite25.scale.set(0.5);
      } else {
        sprite25.scale.set(0.4);
      }
      // 收集四周的圆角矩形，方便使用gsap进行动画输出
      this.objs = [];

      // 创建一个圆形
      const cir = new PIXI.Graphics();
      // cir.beginFill(0x6A76AC);

      cir.drawCircle(0, 0, app.view.width / 2);
      // cir.pivot.x = cir.pivot.y = app.view.width/2
      cir.position.set(app.view.width / 2, app.view.width / 2);
      // 加入到精灵中
      sprite.addChild(cir);
      // 循环创建13个圆角矩形
      for (let i = 0; i < 13; i++) {
        // 创建圆角矩形实例
        const obj = new PIXI.Graphics();
        // 每隔45度就创建一个大号黄色的圆角矩形，其他的为白色小号
        if ((i * 30) % 45 == 0) {
          // 填充黄色
          obj.beginFill(0xf4b91a);
          obj.drawRoundedRect(0, 0, 3, 26, 5);
          // x轴的支点设置一半
          obj.pivot.x = 3;
        } else {
          // 填充白色
          obj.beginFill(0xffffff);
          obj.drawRoundedRect(0, 0, 2, 20, 5);
          // x轴的支点设置一半
          obj.pivot.x = 1.5;
        }
        // 设置y轴的支点为整个舞台的高度的一半
        obj.pivot.y = app.view.width / 2 - 20;
        // 设置所有的圆角矩形位置中舞台的正上方
        obj.position.set(app.view.width / 2, app.view.width / 2);
        // 设置角度
        obj.angle = i * 30;
        sprite.addChild(obj);
        // 将所有的圆角矩形收集到数组容器中
        this.objs.push(obj);
      }
      // 设置精灵的支点
      sprite.pivot.x = sprite.pivot.y = app.view.width / 2;
      // 移动精灵到正中心
      sprite.position.set(app.view.width / 2, app.view.width / 2);
      // 添加到舞台
      app.stage.addChild(sprite);

      app.stage.addChild(sprite25);
      // 使用gsap创建动画
      this.container = gsap.to(sprite, {
        repeat: Infinity,
        angle: 360,
        ease: Linear.easeIn,
        duration: 30,
        paused: !this.autoplay,
      });
      // 使用gsap创建动画
      this.twwen = gsap.to(
        this.objs.map((item) => item.scale),
        {
          repeat: Infinity,
          yoyo: true,
          duration: 2,
          x: 0.05,
          paused: !this.autoplay,
        }
      );

      app.stage.addEventListener("click", () => {
        this.switchover();
      });
    },
    remove25() {
      const { app } = this;
      const { sprite } = this;
      app.stage.removeChild(this.sprite25);
      this.container.pause();

      this.objs.forEach((obj) => {
        sprite.removeChild(obj);
      });
    },
    add25() {
      const { app } = this;
      const { sprite } = this;
      app.stage.addChild(this.sprite25);
      this.container.play();
      this.objs.forEach((obj) => {
        sprite.addChild(obj);
      });
    },
    addHuXi() {
      const { app } = this;

      const huxiCir = new PIXI.Graphics();
      huxiCir.beginFill(0x4a044e);
      huxiCir.drawCircle(0, 0, this.size / 2 / 2);
      this.huxiCir = huxiCir;
      this.huxiCir.name = "huxiCir";
      const self = this;
      const huxiTween = gsap.timeline({
        paused: false,
        play: false,
        // repeat: Infinity,
      });

      huxiTween.add("xiqi");
      huxiTween.to(huxiCir.scale, {
        paused: false,
        duration: 4,
        x: 1.5,
        y: 1.5,
        onStart() {
          self.statusText = "吸";
        },
        onComplete() {
          self.statusText = "保持";
        },
        onUpdate() {
          self.statusText = "吸";
          self.timer = 4 - Math.floor(this.time());
        },
      });
      huxiTween.add("biqi");
      huxiTween.to(huxiCir.scale, {
        paused: false,
        duration: 7,
        alpha: 1,
        x: 1.5,
        y: 1.5,
        onComplete() {
          self.statusText = "吐";
        },
        onUpdate() {
          self.statusText = "保持";
          self.timer = 7 - Math.floor(this.time());
        },
      });
      huxiTween.add("toqi");
      huxiTween.to(huxiCir.scale, {
        paused: false,
        duration: 8,
        alpha: 1,
        x: 1,
        y: 1,
        onComplete() {
          self.count += 1;
          self.statusText = "吸";
        },
        onUpdate() {
          self.statusText = "吐";
          self.timer = 8 - Math.floor(this.time());
        },
      });

      this.huxiTween = huxiTween;
      app.stage.addChild(this.huxiCir);
      this.huxiCir.position.set(app.view.width / 2, app.view.height / 2);
      this.HuxiMp3.play();
    },
    removeHuXi() {
      this.app.stage.removeChild(this.huxiCir);
      this.huxiCir = null;
      this.huxiTween.pause(0, false);
      this.statusText = "";
      this.timer = "";
      this.count = 0;
      this.HuxiMp3.pause();
      this.HuxiMp3.currentTime = 0;
    },
    // 呼吸模式和播放模式
    switchover() {
      if (this.HuxiMp3.paused) {
        this.addHuXi();
      } else {
        this.removeHuXi();
      }
    },
    textAnim(ref) {
      this.$nextTick(() => {
        const mySplitText = new window.SplitText(this.$refs[ref], { type: "chars" });
        const { chars } = mySplitText;
        gsap.fromTo(
          chars,
          {
            duration: 0.5,
            opacity: 0,
            scale: 0.5,
            y: -1,
            transformOrigin: "50%",
          },
          {
            duration: 0.5,
            opacity: 1,
            scale: 1,
            y: -1,
            transformOrigin: "50%",
          }
        );
      });
    },
    // 呼吸音静音切换
    switchMute() {
      if (this.inhaleMp3.volume) {
        this.inhaleMp3.volume = 0;
      } else {
        this.inhaleMp3.volume = 1;
      }
    },
  },
  watch: {
    statusText(nVal, oVal) {
      // this.textAnim('text');
    },
    timer(nVal, oVal) {
      // this.textAnim('timer');
    },
  },
};
</script>

<style scoped lang="scss">
.text-container {
  position: absolute;
  // left:50%;
  // top:50%;
  // transform: translateX(-50%) translateY(-50%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.status_text {
  font-size: 28px;
}
.timer {
  text-align: center;
  font-size: 22px;
}
</style>
